<template>
  <div class="lum-dialog-mask animated fadeIn">
    <el-container class="lum-dialog-box">
      <el-header class="header no-select" height="60px">
        <p>发起投票</p>
        <p class="tools">
            <el-icon @click="close()"><ele-Close /></el-icon>
        </p>
      </el-header>
      <el-main class="main no-padding vote-from">
        <div class="vote-title">投票方式</div>
        <div>
          <el-radio-group v-model="mode">
            <el-radio :label="0">单选</el-radio>
            <el-radio :label="1">多选</el-radio>
          </el-radio-group>
        </div>
        <div class="vote-title">选择方式</div>
        <div>
          <el-radio-group v-model="anonymous">
            <el-radio :label="0">公开</el-radio>
            <el-radio :label="1">匿名</el-radio>
          </el-radio-group>
        </div>
        <div class="vote-title">投票主题</div>
        <div>
          <el-input
            size="default"
            clear="vote-input"
            v-model.trim="title"
            placeholder="请输入投票主题，最多50字"
            :maxlength="50"
          />
        </div>

        <div class="vote-title">投票选项</div>
        <div>
          <div class="vote-options" v-for="(option, index) in options" :key="option.id">
            <div class="lbox">
              <el-input
                size="default"
                clear="vote-input"
                v-model.trim="option.value"
                placeholder="请输入选项内容"
                :maxlength="120"
              >
                <template #prepend>
                    <span style="margin-left:7px;" v-text="String.fromCharCode(65 + index)"/>
                </template>
                
              </el-input>
            </div>
            <div class="rbox">
                <el-icon @click="removeOption(index)"><ele-Close /></el-icon>
            </div>
          </div>

          <h6 class="pointer add-option" @click="addOption">
            <el-icon><ele-Plus /></el-icon> 添加选项
          </h6>
        </div>
      </el-main>
      <el-footer class="footer">
        <el-button plain size="default" @click="close()">取消</el-button>
        <el-button type="primary" size="default" :disabled="isCheck" :loading="loading" @click="submit">发起投票</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { computed, reactive, toRefs } from 'vue'
import { ElNotification } from 'element-plus'
import { useDialogueInfo } from '/@/stores/chat/dialogue'
import { useChatApi } from '/@/api/chat/index'

export default {
    name: 'MeEditorVote',
    props: {
        group_id: {
            type: [String, Number],
            default: 0
        }
    },
    setup(props, context) {
        const dialogueInfo = useDialogueInfo()
        const chatApi = useChatApi()
        const state = reactive({
            loading: false,
            anonymous: 0,
            mode: 0,
            title: '',
            options: [
                {
                    value: '',
                },
                {
                    value: '',
                },
                {
                    value: '',
                },
            ]
        })
        const isCheck = computed(() => {
            if (state.title == '') return true
            return state.options.some(option => option.value == '')
        })
        const close = () => {
            context.emit('close')
        }
        const submit = () => {
            let items = []
            const { receiver_id } = dialogueInfo
            state.options.forEach(option => {
                items.push(option.value)
            })
            state.loading = true
            chatApi.ServeSendVote({
                anonymous: state.anonymous,
                receiver_id,
                mode: state.mode,
                title: state.title,
                options: items,
            }).then(res => {
                if (res.code == 0) {
                    context.emit('close')
                    ElNotification({
                        title: '友情提示',
                        message: '发起投票成功!',
                        type: 'success'
                    })
                } else {
                    ElNotification({
                        title: '友情提示',
                        message: res.message,
                        type: 'warning'
                    })
                }
            }).catch(() => {
                state.loading = false
            })
        }
        const addOption =() => {
            if (state.options.length >= 6) {
                return false
            }
            state.options.push({
                value: '',
            })
        }
        const removeOption = (index) => {
            if (state.options.length <= 2) {
                return false
            }
            state.options.splice(index, 1)
        }
        return {
            ...toRefs(state),
            close,
            isCheck,
            submit,
            addOption,
            removeOption
        }
    }
}
</script>

<style lang="scss" scoped>
.lum-dialog-box {
  height: 600px;
  max-width: 450px;

  .vote-from {
    box-sizing: border-box;
    padding: 15px 25px;
    overflow: hidden;

    .vote-title {
      margin: 20px 0 10px;
      &:first-child {
        margin-top: 0;
      }
    }

    .vote-options {
      display: flex;
      min-height: 30px;
      margin: 10px 0;

      .lbox {
        width: 100%;

        :deep(.el-input__prefix) {
          height: 36px;
          line-height: 36px;
        }
      }

      .rbox {
        flex-basis: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        i {
          font-size: 18px;
          cursor: pointer;
          &:hover {
            color: red;
          }
        }
      }
    }

    .add-option {
      margin-top: 5px;
      font-weight: 400;
      color: var(--el-color-primary);
    }
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 32px;
    border-top: 1px solid #f5eeee;
  }
}

:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: #606266;
}
:deep(.el-radio-group){
  margin-top: -5px;
}
</style>